// import { formatMessage } from 'umi-plugin-react/locale';
import React, { CSSProperties } from 'react';
import { connect } from 'dva';
import { Link } from 'umi';
import dropByCacheKey from 'umi/dropByCacheKey';
import getCachingKeys from 'umi/getCachingKeys';
// import { Icon, Tooltip } from 'antd';
import router from 'umi/router';
import { ConnectProps } from '@/models/connect';

import Avatar from './AvatarDropdown';
// import HeaderSearch from '../HeaderSearch';
import SelectLang from '../SelectLang';
import Warn from './Warn';
import TagView from './TagView';
import Export from './Export';
import styles from './index.less';
import permissionManager from '@/utils/permissionManager';

export type SiderTheme = 'light' | 'dark';
export interface GlobalHeaderRightProps extends ConnectProps {
  theme?: SiderTheme;
  layout: 'sidemenu' | 'topmenu';
  location?: any;
  menuData?: [];
}

const spanStyle: CSSProperties = {
  cursor: 'pointer',
  color: '#1890FF',
  fontSize: '15px',
  position: 'absolute',
  top: '0',
  left: '100px',
  height: '50px',
  lineHeight: '50px',
};

const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = props => {
  const { theme, layout, location, menuData, dispatch } = props;
  let className = styles.right;
  // const SYSTEM_TYPE = sessionStorage.getItem('SYSTEM_TYPE');
  // const QUICK_NAVIGATION = `${SYSTEM_TYPE}/navigation`;

  // 点击主导航需要对redux及routeCache进行clear
  const gotoHome = () => {
    if (dispatch) {
      dispatch({
        type: 'tagView/delAllViews',
        payload: {},
        callback: () => {
          router.push('/');
        },
      });
      const pathList = getCachingKeys();
      pathList.map((path: string) => {
        dropByCacheKey(path);
        return path;
      });
    }
  };

  if (theme === 'dark' && layout === 'topmenu') {
    className = `${styles.right}  ${styles.dark}`;
  }
  const warnAuth = permissionManager.checkPageAccess('/finance/fund/withdraw');
  return (
    <React.Fragment>
      <div className={className}>
        {/* {window.location.pathname !== QUICK_NAVIGATION ? (
          <Link to={QUICK_NAVIGATION} style={spanStyle}>
            便捷导航
          </Link>
        ) : (
          <span style={spanStyle}>便捷导航</span>
        )} */}
        <Link to="/" style={spanStyle} onClick={e => gotoHome()}>
          子系统导航
        </Link>
        {/* <HeaderSearch
          className={`${styles.action} ${styles.search}`}
          placeholder={formatMessage({
            id: 'component.globalHeader.search',
          })}
          dataSource={[
            formatMessage({
              id: 'component.globalHeader.search.example1',
            }),
            formatMessage({
              id: 'component.globalHeader.search.example2',
            }),
            formatMessage({
              id: 'component.globalHeader.search.example3',
            }),
          ]}
          onSearch={value => {
            console.log('input', value);
          }}
          onPressEnter={value => {
            console.log('enter', value);
          }}
        /> */}
        {/* <Tooltip
          title={formatMessage({
            id: 'component.globalHeader.help',
          })}
        >
          <a
            target="_blank"
            href="https://pro.ant.design/docs/getting-started"
            rel="noopener noreferrer"
            className={styles.action}
          >
            <Icon type="question-circle-o" />
          </a>
        </Tooltip> */}
        <Export />
        {warnAuth && <Warn />}
        <Avatar />
        <SelectLang className={styles.action} />
      </div>
      <TagView location={location} menuData={menuData} />
    </React.Fragment>
  );
};

export default connect(({ settings, fund }: { settings: any; fund: any }) => ({
  theme: settings.navTheme,
  layout: settings.layout,
}))(GlobalHeaderRight);
